<template>
  <!-- 组件根标签 -->
  <div>
    <h3>4.0如果默认的内容不是我们想要的,我们可以使用文档体哦那个的插槽</h3>
    <!-- 插槽不是你想用就能用的,要根据文档提供的才能使用 -->
    <van-cell-group>
      <!-- 仅给左侧title的内容添加图标 有提供原生属性 icon -->
      <van-cell title="英雄" icon="location-o" value="亚瑟"> </van-cell>

      <!-- 给左边title的内容的左右都添加图标,左侧的可以右icon,右侧的没提供,那么就要用插槽来解决了 -->
      <van-cell value="牛逼">
        <template #title>
          <i class="iconfont iconbianzu3"></i>
          用户
          <i class="iconfont iconicon_xueli"></i>
        </template>
      </van-cell>

      <!-- 改变右侧的图标 -->
      <van-cell title="微信">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="chat-o" />
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell title="英勇事迹" :label="label">
      <template #default>
        <i class="iconfont iconbianzu3"></i>
        上路吧
        <i class="iconfont iconicon_xueli"></i>
      </template>
    </van-cell>

    <h4>5.0输入框的使用</h4>
    <van-field
      v-model="value"
      type="text"
      label="文本"
      placeholder="请输入用户名"
    />
    <van-field
      v-model="value"
      type="tel"
      label="手机号"
      placeholder="请输入手机号"
    />
    <van-field v-model="value" type="digit" label="整熟" placeholder="整数" />
    <van-field
      v-model="value"
      type="number"
      label="数字"
      placeholder="可以带小数"
    />
    <van-field
      v-model="value"
      type="password"
      label="密码"
      placeholder="请输入密码"
    />

    <h4>6.0表单的使用</h4>
    <van-form>
      <van-field
        v-model="use.phone"
        type="digit"
        label="手机号"
        placeholder="请输入手机号"
        :rules="rules.phone"
      >
        <template #left-icon>
          <i class="iconfont iconbianzu3"></i>
        </template>
      </van-field>
      <van-field
        v-model="use.code"
        type="digit"
        label="验证码"
        placeholder="请输入验证码"
        left-icon="smile-o"
        right-icon="warning-o"
        :rules="rules.code"
      />
    </van-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      label: '扶老太太过马路,顶风尿尿此一鞋,顺丰调调,韵达快递',
      use: { phone: '', code: '' },
      rules: {
        phone: [{ required: true, message: '一定要输入手机号' }],
        code: [{ required: true, message: '一定要输入验证码' }]
      }
    }
  },
  methods: {},
  components: {}
}
</script>
<style lang="less"></style>
